<template>
  <div class="chart-container">
    <div v-if="chartData && chartData.length" class="chart-box">
      <div class="outer-ring"></div>
      <div class="bg-border">
        <div class="center-label" @click="chartClick">
          <div class="percent">{{ percent || count }}</div>
          <div class="label">{{ activeLabel || '区域统计' }}</div>
        </div>
      </div>
      <div ref="chartRef" class="chart"></div>
      <div class="legend-box">
        <div class="list-box">
          <div v-for="(item, index) in chartData" :key="item.name"
            :class="['legend-item', 'color-' + colorIndex(index)]" @click="chartClick">
            <div class="marker" :style="{ background: color[colorIndex(index)] }"></div>
            <div class="label" :title="item.name">{{ item.name }}</div>
            <div class="number">{{ item.value }}<span class="unit"> 个</span></div>
            <div class="percent">{{ item.percent }}</div>
          </div>
        </div>
      </div>
    </div>
    <div v-else class="s-empty">
      <img src="@/assets/images/noData.png" alt="" />
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, nextTick, onMounted, onUnmounted, ref } from 'vue';
import { nowSize } from "@/utils/utils";
import * as echarts from "echarts";

export default defineComponent({
  name: "AlarmLevelChart",
  components: {},
  setup() {
    let myChart: any;
    const chartRef: any = ref(null);
    const chartData: any = ref([
      { name: "香洲区", value: 2000, percent: '' },
      { name: "斗门区", value: 2000, percent: '' },
      { name: "金湾区", value: 1000, percent: '' },
      { name: "高新区", value: 2000, percent: '' },
      { name: "横琴粤澳深度合作区", value: 1000, percent: '' },
      { name: "万山区", value: 2000, percent: '' },
    ]);
    const color = ["#DD4821", "#FF8106", "#FAE15F", "#32C0FF",
      "#42FAFF", "#e074ff"];
    const activeLabel = ref('');
    const percent = ref('');
    const count = computed(() => chartData.value.reduce((acc: number, cur: any) => acc += cur.value, 0));
    const colorIndex = computed(() => {
      const length = color.length;
      return (index: number) => {
        return (index + length) % length;
      };
    });

    // 初始化echarts图表
    const initChart = () => {
      if (!myChart) {
        myChart = echarts.init(chartRef.value);
      }
      let option: any = {
        tooltip: {
          trigger: 'item',
          borderWidth: nowSize(2), // 设置边框宽度
          backgroundColor: 'rgba(7,31,52,0.8)',
          textStyle: {
            color: '#BBD0DC',
          },
        },
        legend: {
          show: false,
          orient: "vertical", // 垂直排列图例
          top: "center",
          left: "53%",
          icon: "rect",
          itemGap: nowSize(55),
          itemWidth: nowSize(42), // 设置图例标记的宽度为正方形
          itemHeight: nowSize(13), // 设置图例标记的高度为正方形
          textStyle: {
            padding: [0, nowSize(5), 0, nowSize(5)],
            rich: {
              name: {
                fontSize: nowSize(40), // 可以根据需要调整大小
                color: "#C0CEE5",
              },
              value: {
                color: "#00FFFF",
                fontSize: nowSize(40),
                padding: [0, nowSize(60)], // 添加右边距以分隔名称和数值
              },
            },
          },
          itemStyle: {
            borderWidth: nowSize(2),
            borderColor: "#00FFFF",
          },
          formatter: function (name: any) {
            let item: any = chartData.value.find(function (d: any) {
              return d.name === name;
            });
            return `{name|${item.name}}{value|${item.value}个}`;
          },
        },
        color: color,
        label: {
          show: false,
          position: "center",
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '70%'],
            center: ['28%', '50%'],
            label: {
              show: false,
              position: "center",
            },
            data: chartData.value,
          },
        ],
      };
      option && myChart.setOption(option, true);
      myChart.on('click', 'series', chartClick);
    };
    // 判断是否有数据，有数据渲染echarts图
    const handleResize = async () => {
      if (myChart) {
        myChart.resize();
        initChart();
      }
    };
    const chartClick = () => {
      console.log('触发点击事件----------')
    };

    onMounted(async () => {
      window.addEventListener("resize", handleResize);

      await nextTick();
      initChart();
    });
    onUnmounted(() => {
      myChart && myChart.dispose();
      window.removeEventListener("resize", handleResize);
    });

    return {
      color,
      count,
      percent,
      chartRef,
      chartData,
      activeLabel,
      colorIndex,
      chartClick,
    }
  }
});
</script>

<style lang="less" scoped>
.chart-container {
  width: 100%;
  height: 100%;

  .s-empty {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    img {
      width: 513px;
      height: 377px;
    }
  }

  .chart-box {
    position: relative;
    width: 100%;
    height: 100%;

    .chart {
      width: 100%;
      height: 100%;
    }
  }

  .outer-ring {
    width: 650px;
    height: 650px;
    border-radius: 50%;
    position: absolute;
    left: 9.4%;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(37, 65, 98, 0.2);
  }

  .bg-border {
    width: 4.2rem;
    height: 4.2rem;
    color: #55ffff;
    border-radius: 50%;
    transform: translateY(-50%);
    background: rgba(5, 35, 70, 0.7);
    position: absolute;
    left: 16.2%;
    top: 50%;
    z-index: 1;
    pointer-events: none;

    .center-label {
      width: 279px;
      height: 279px;
      cursor: pointer;
      background: url("@/assets/images/u268.svg") no-repeat center;
      background-size: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      pointer-events: auto;
    }

    .percent {
      font-size: 68px;
      color: #00FFFF;
      text-align: center;
      padding-top: 60px;
    }

    .label {
      width: 255px;
      height: 80px;
      line-height: 80px;
      text-align: center;
      background: url("@/assets/images/chart-label-bg.png") no-repeat center;
      background-size: 100%;
      position: absolute;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      color:#ffffff;
    }
  }

  .legend-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45%;
    height: 80%;
    transform: translateY(-50%);
    overflow: hidden;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .list-box {
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
    }
  }

  .legend-item {
    width: 100%;
    height: 88px;
    display: flex;
    cursor: pointer;
    align-items: center;
    position: relative;
    background-size: 100% 100% !important;
    background-position: left center !important;
    margin: 12px 0;

    .marker {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      margin: 0 40px;
    }

    .label {
      width: 35%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .number,
    .percent {
      color: #01FFFE;
      position: absolute;
      top: 50%;
      right: 25%;
      transform: translateY(-50%);
    }

    .percent {
      right: 5%;
    }

    .unit {
      color: #fff;
    }

    &.color-0 {
      background: url("@/assets/images/red.png") no-repeat;
    }

    &.color-1 {
      background: url("@/assets/images/orange.png") no-repeat;
    }

    &.color-2 {
      background: url("@/assets/images/yellow.png") no-repeat;
    }

    &.color-3 {
      background: url("@/assets/images/blue.png") no-repeat;
    }

    &.color-4 {
      background: url("@/assets/images/green.png") no-repeat;
    }

    &.color-5 {
      background: url("@/assets/images/purple.png") no-repeat;
    }
  }
}
</style>
